<template>
    <el-container>
        <el-header style="padding: 0;">
            <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b"   @select="handleSelect">
                <el-menu-item index="/main/first" @clikc="gotoUrl('/main/first')">子应用1</el-menu-item>
                <el-menu-item index="/main/second" @clikc="gotoUrl('/main/second')">子应用2</el-menu-item>
            </el-menu>
        </el-header>
        <div id="page-main-container">
            <RouterView></RouterView>
        </div>
    </el-container>
</template>
<script setup lang="ts">
import { onBeforeMount } from 'vue'
import { microApps } from "@/common/micro-app.ts"
import {
    registerMicroApps,
    start
} from "qiankun";
const handleSelect=(key:string)=>{
    gotoUrl(key)
}
const gotoUrl=(url:string)=>{
    history.pushState(null, url, url);
}
onBeforeMount(() => {
    const windowPbj: any = window
    if (!windowPbj.qiankunStarted) {
        registerApp();
        start();
    }

})

// 挂载应用
const registerApp = () => {
   try {
    registerMicroApps(microApps)
   } catch (error) {
    console.log('error',error)
   }
}

</script>